import React, { Component, Fragment } from "react";
// 导入模块
import { Logo, NavLeft, NavRight, Button, BtnReg, BtnWrite, NavText, HeaderWapper, NavInput } from './style'

// 让header连接store
import { connect } from 'react-redux'
// 引入actionCreator
import { actionCreators } from './store'
import { Link } from 'react-router-dom'
import { actionCreators as loginActionCreators } from '../../pages/Login/store'
class Header extends Component {

  render() {
    return (
      // Logo,NavLeft,NavRight,Button,BtnReg,BtnWrite
      <Fragment>
        <div style={{ borderBottom: '1px solid #f0f0f0' }}>
          <HeaderWapper>
            <Logo></Logo>
            <NavLeft>
              <NavText>首页</NavText>
              <NavText>下载App</NavText>
              <NavText>会员</NavText>
              <NavText>IT技术</NavText>
              <NavInput style={this.props.isFocus ? { width: '300px' } : {}}>
                <input type="text" name="" id="" placeholder="搜索" onFocus={this.props.InputFocus} onBlur={this.props.InputBlur} />
                <i className="iconfont icon-41" style={this.props.isFocus ? { backgroundColor: '#333333', color: '#fff' } : {}}></i>
              </NavInput>
              <NavText>Aa</NavText>
              {
                this.props.loginStatus ? <NavText onClick={this.props.logOut}>退出</NavText> : (<Link to='/login' style={{ textDecoration: 'none' }}> <NavText>登录</NavText> </Link>)
              }
            </NavLeft>
            <NavRight>
              <Button>
                <BtnReg>注册</BtnReg>
                <Link to="/writer"> <BtnWrite>写文章</BtnWrite></Link>
              </Button>
            </NavRight>
          </HeaderWapper>
        </div>
      </Fragment>
    )
  }
}

// 创建mapState，映射仓库中的数据
const mapState = (state) => ({
  // isFocus: state.get('header').get('isFocus')
  // 还支持这种写法getIn
  isFocus: state.getIn(['header', 'isFocus']),
  loginStatus: state.getIn(['login', 'loginStatus'])
})
// 创建mapDispatch，映射仓库中的方法
const mapDispatch = (dispatch) => ({
  // 聚焦效果
  InputFocus() {
    console.log('聚焦')
    dispatch(actionCreators.HandleInputFocus())
  },
  // 聚焦效果
  InputBlur() {
    console.log('失焦')
    dispatch(actionCreators.HandleInputBlur())
  },
  //点击退出功能，修改login中store的数据
  logOut() {
    dispatch(loginActionCreators.changeLogOut())
  }
})
export default connect(mapState, mapDispatch)(Header) 
